<template>
  <div class="Rightclass_box">
    <!-- 标题 -->
    <div class="_Rimg_boxs">
      <p class="_Rtxt">植物保护等级统计</p>
      <p class="_Rtxts">Animal protection level statistics</p>
    </div>
    <div class="Rcircular_box">
      <div class="Rcircular_S">
        <mychart id="circular_g" :option="option_e" width=".8rem" height=".8rem"></mychart>
        <p>其他</p>
      </div>
      <div class="Rcircular_S">
        <mychart id="circular_e" :option="option_f" width="0.8rem" height="0.8rem"></mychart>
        <p>国家Ⅰ级</p>
      </div>
      <div class="Rcircular_S">
        <mychart id="circular_f" :option="option_g" width=".8rem" height=".8rem"></mychart>
        <p>国家Ⅱ级</p>
      </div>

    </div>
  </div>
</template>

<script>
import mychart from "../module/mychart.vue";
export default {
  components: { mychart },
  props: ['Plantprotection'],
  data() {
    return {
      option_e: {},
      option_f: {},
      option_g: {},
      Plants: this.Plantprotection,
    };
  },
  created() {

  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let total = 0
      for (let key in this.Plants) {
        total += this.Plants[key]
      }
      this.drawbar1(total)
      this.drawbar2(total)
      this.drawbar3(total)
    },

    drawbar1(e) {
      this.option_e = {
        color: ["#10C6FF", "#3999dd"],
        title: {
          text: this.Plants.otherLevel,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#10C6FF",
            fontSize: ".17rem"
          }
        },
        tooltip: {
          formatter: function (params) {
            return params.name + ":" + params.percent + " %";
          }
        },
        series: [
          {
            //   name: "Line 1",
            type: "pie",
            clockwise: false,
            radius: ["100%", "70%"],
            itemStyle: {

              label: {
                show: false
              },
              labelLine: {
                show: false
              }

            },
            emphasis: {
              scale: true,
            },
            data: [
              {
                value: this.Plants.otherLevel,
                name: "占比",
                itemStyle: {

                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }

                }
              },
              {
                name: "剩余",
                value: e - this.Plants.otherLevel,
                itemStyle: {

                  color: "rgba(255, 255, 255, 0.30)"

                }
              }
            ]
          }
        ]
      }
    },
    // drawbar2(e) {
    //   this.option_f = {
    //     color: ["#FF8C22", "#3999dd"],
    //     title: {
    //       text: this.Plants.oneLevel,
    //       x: "center",
    //       y: "center",
    //       textStyle: {
    //         fontWeight: "normal",
    //         color: "#FF8C22",
    //         fontSize: ".17rem"
    //       }
    //     },
    //     tooltip: {
    //       formatter: function (params) {
    //         return params.name + ":" + params.percent + " %";
    //       }
    //     },
    //     series: [
    //       {
    //         //   name: "Line 1",
    //         type: "pie",
    //         clockwise: false,
    //         radius: ["100%", "70%"],
    //         itemStyle: {
    //           textStyle: {
    //             label: {
    //               show: false
    //             },
    //             labelLine: {
    //               show: false
    //             }
    //           }
    //         },
    //         emphasis: {
    //           scale: true,
    //         },
    //         data: [
    //           {
    //             value: this.Plants.oneLevel,
    //             name: "占比",
    //             itemStyle: {
    //               textStyle: {
    //                 label: {
    //                   show: false
    //                 },
    //                 labelLine: {
    //                   show: false
    //                 }
    //               }
    //             }
    //           },
    //           {
    //             name: "剩余",
    //             value: e - this.Plants.oneLevel,
    //             itemStyle: {
    //               color: "rgba(255, 255, 255, 0.30)"
    //             }
    //           }
    //         ]
    //       }
    //     ]
    //   }
    // },
    drawbar2(e) {
      this.option_f = {
        color: ["#FF8C22", "#3999dd"],
        title: {
          text: this.Plants.oneLevel,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#FF8C22",
            fontSize: ".17rem"
          }
        },
        tooltip: {
          formatter: function (params) {
            return params.name + ":" + params.percent + " %";
          }
        },
        series: [
          {
            //   name: "Line 1",
            type: "pie",
            clockwise: false,
            radius: ["100%", "70%"],
            itemStyle: {

              label: {
                show: false
              },
              labelLine: {
                show: false
              }

            },
            emphasis: {
              scale: true,
            },
            data: [
              {
                value: this.Plants.oneLevel,
                // name: "占比",
                itemStyle: {

                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }

                }
              },
              {
                name: "剩余",
                value: e - this.Plants.oneLevel,
                itemStyle: {
                  color: "rgba(255, 255, 255, 0.30)"
                }
              }
            ]
          }
        ]
      }
    },
    
    drawbar3(e) {
      this.option_g = {
        color: ["#B151FD", "#3999dd"],
        title: {
          text: this.Plants.twoLevel,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#B151FD",
            fontSize: ".17rem"
          }
        },
        tooltip: {
          formatter: function (params) {
            return params.name + ":" + params.percent + " %";
          }
        },
        series: [
          {
            //   name: "Line 1",
            type: "pie",
            clockwise: false,
            radius: ["100%", "70%"],
            itemStyle: {

              label: {
                show: false
              },
              labelLine: {
                show: false
              }

            },
            emphasis: {
              scale: true,
            },
            data: [
              {
                value: this.Plants.twoLevel,
                name: "占比",
                itemStyle: {

                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }

                }
              },
              {
                name: "剩余",
                value: e - this.Plants.twoLevel,
                itemStyle: {
                  color: "rgba(255, 255, 255, 0.30)"
                }
              }
            ]
          }
        ]
      }
    }
  },
};
</script>
<style>
@import "../../../static/newcss/myRightZoonclass.css";
</style>
